//au chargement de la page
$(function(){
    //On prépare une fonction qui sera à lancer au moment des changements de valeurs des selects
    //Cette fonction permet de modifier les classes des formulaires pour dire s'il ne sont pas 
    //concernés par la valeur sélectionnée dans les selects
    var changeSalle=function(){
        //si on sort d'une action post, il est possible qu'un form soit déjà sélectionné
        var $selected=$(".main_contenu>form.js_form_salle.selected");
        //si c'est le cas
        if($selected.size()!=0){
            //on récupère son id dans son nom de classe
            var salleId=$selected.attr("class").split("js_form_salle_")[1].split(" ")[0];
            //on retire son attribut "sélectionné"
            $selected.removeClass("selected");
            //on met tous les select de salle à la valeur de l'id récupéré
            $salles.val(salleId);
            //et on repasse dans la fonction pour un traitement normal
            changeSalle();
        }
        //normalement, tous les selects ont la même valeur
        var val=$salles.val();
        //on prend tous les formulaires
        $forms.each(function(){
            //on retire leur classe "non_choisi" et si il ne s'agit pas de celui qui correspond à la valeur des selects
            if(!$(this).removeClass("non_choisi").is(".js_form_salle_"+val)){
                //on remet la calsse "non_choisi"
                $(this).addClass("non_choisi");
            }
        });
    };
    
    //on crée un nouveau select
    var $select=$("<select></select>").addClass("js_select_salle");
    //on récupère l'ensemble des formulaires
    $forms=$(".main_contenu>form.js_form_salle");
    //pour chaque formulaire
    $forms.each(function(){
        //on récupère la valeur de l'id de la salle correspondant au formulaire
        var id=$(this).find(".js_id_salle").val();
        //on récupère la valeur du nom de la salle correspondant au formulaire
        var nom=$(this).find(".js_nom_salle").val();
        //on ajoute ces valeurs dans une option du select
        $select.append("<option value='"+id+"'>"+nom+"</option>");
    //on repasse un traitement pour l'ensemble des formulaire
    }).each(function(){
        //on crée un label pour donner un titre au select et on y ajoute un clone du select qu'on vient de créer
        $label=$("<label><span>Salle : </span></label>").append($select.clone()).hide();
        //dans le formulaire, dans l'enfant <p>, on cherche un <span>, on ajoute juste avant le label qu'on vient de créer
        //et on dit de ne pas l'afficher
        $(this).children("p").find("span").before($label).addClass("dont_show");
    });
    //Pour tous les selects, on leur ajoute un évenement onChange
    $(".main_contenu>form select").bind("change",function(){
        //dès que le select change de valeurs, on récupère sa valeur
        var valeur=$(this).val();
        //ainsi que sa classe
        var classe=$(this).attr("class");
        //on affecte cette valeur à tous les selects qui représentent la même valeur
        $("."+classe).val(valeur);
    });
    //on ajoute un évenement sur les select des salles qui sera aussi déclenché au onChange. Il exécutera la fonction changeSalle
    $salles=$("form .js_select_salle").bind("change",changeSalle);
    
    //Pour initialiser la page, on exécute une première fois changeSalle
    changeSalle();
});

